<template>
    <div>
        <el-row :gutter="20" style="padding-top: 10px;">
            <el-col :span="8">
                <el-card class="box-card">
                    <div slot="header" class="clearfix" :bodyStyle="{ display: 'flex' }">
                    <h4>立案查处情况</h4>
                </div>
                <pie-echart ref="pieEchart"></pie-echart>
                </el-card>
            </el-col>
            <el-col :span="8">
                <map-echart></map-echart>
            </el-col>
            <el-col :span="8">
                <el-card class="box-card">
                    <div slot="header" class="clearfix" :bodyStyle="{ display: 'flex' }">
                        <h4>检查问题统计Top5</h4>
                    </div>
                    <funnel-echart ref="roseEchart" style="width: 100%;"></funnel-echart>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20" style="padding-top: 10px">
            <el-col :span="12">
                <el-card class="box-card">
                    <div slot="header" class="clearfix" :bodyStyle="{ display: 'flex' }">
                        <h4>日常监督检查情况</h4>
                    </div>
                    <columns-echart ref="columnsEchart"></columns-echart>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="box-card">
                    <div slot="header" class="clearfix" :bodyStyle="{ display: 'flex' }">
                        <h4>食品抽验情况</h4>
                    </div>
                    <sector-echart ref="sectorEchart"></sector-echart>
                </el-card>
            </el-col>
        </el-row>

        <!-- <div id="myChart" style="width: 600px;height: 500px;"></div> -->
    </div>
</template>
  
<script>
import mapEchart from "./creditModule/mapEchart";
import funnelEchart from "./foodSuperviseModule/funnelEchart";
import roseEchart from "./HomeModule/roseEchart";
import columnEchart from "./HomeModule/columnEchart";
import columnsEchart from "./foodSuperviseModule/columnsEchart";
import pieEchart from "./foodSuperviseModule/pieEchart";
import sectorEchart from "./foodSuperviseModule/sectorEchart";

// Vue.prototype.$echarts = echarts
require("echarts"); // echarts theme
export default {
    name: "chart",
    components: { mapEchart, funnelEchart, roseEchart, columnEchart, columnsEchart, pieEchart,sectorEchart },
    data() {
        return {
            chart: null,
            options: {},
            listArr: [], //城市json
            type: 0,
            // cardList: [
            //   {
            //     title: "食品安全",
            //     num: "2324",
            //     path: "/foodSafety"
            //   },
            //   {
            //     title: "信用监管",
            //     num: "3353"
            //   },
            //   {
            //     title: "行政执法",
            //     num: "545"
            //   },
            //   {
            //     title: "一品一码",
            //     num: "33334"
            //   }
            // ]
        };
    },
    created() { },
    methods: {
        jump(path) {
            console.log(path);
            this.router.path(path);
        }
    }
};
</script>
  
<style scoped>
.all {
    width: 100vw;
    height: 100vh;
}

#container {
    width: 100vw;
    height: 100vh;
}
</style>
  